<template>
  <div>
    <v-header></v-header>
    <p class="solution">思路：
      1.先获取段子列表，显示在左侧；
      2.取出第一个段子的sid，获取详情，显示在中间；
      3.点击段子，切换详情
    </p>
    <div class="content">
      <!-- 左侧的段子列表 -->
      <div class="left-side">
        <router-link tag="div" :to="`./${item.sid}`"
          :data-ss="`./${item.sid}`"
          v-for="(item, index) in jokeList" :key="index" class="content-itme">
          <div class="left-content">
            <div class="title">{{item.text}}</div>
          </div>
        </router-link>
      </div>
      <!-- 右侧的段子详情 -->
      <div class="center">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import vHeader from './header'
import detail2 from './detail2'
import axios from 'axios'
import {getJoke, getSingleJoke} from '../../sever'
export default {
  data () {
    return {
      // 左侧段子列表
      jokeList: []
    }
  },
  components: {
    vHeader, detail2
  },
  created() {
    this.getJokeList()
  },
  methods: {
    getJokeList() {
      // return
      axios.post(getJoke, {
        type: 'text',
        count: 5
      })
        .then(res => {
          this.jokeList = res.data.result
        })
    }
  }
}
</script>

<style scoped>
  .solution {
    padding: 10px;
    background-color: #56a5f1;
    color: #fff;
  }
  .left-side {
    position: fixed;
    width: 150px;
    top: 100px;
    left: 0;
  }
  .title {
    padding: 8px;
    border-right: 1px solid #666;
    border-top: 1px solid #666;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  a {
    color: black;
    text-decoration: none;
  }
  /* 选中的链接会有这个class */
  .router-link-active {
    color: #56a5f1;
  }
</style>
